export default {
    data:()=>{
        return {
            formData:{
                time: Date.now()
            }
        }
    },
    props:{
        config:{
          required: true,
          type:Object
      }
    },
    created() {
      this.config.items.forEach(items => {
          items.forEach(item => {
              this.$set(this.formData, item.key, item.value);
          })
      });
    },
    methods:{
        // 渲染表单项
        renderItem(item){
            switch (item.type){
                case 'text':
                    return <el-input v-model={this.formData[item.key]} type={item.type}></el-input>;
                case 'password':
                    return <el-input v-model={this.formData[item.key]} show-password></el-input>;
                case 'select':
                    return <el-select v-model={this.formData[item.key]}>
                        {
                            item.options && item.options.map(option=>{
                                return <el-option label={option.label} value={option.value}></el-option>;
                            })
                        }
                    </el-select>;
                default : return '';
            }
        },
        // 渲染列
        renderColumn(columns){
            return columns.map((column=>{
                const colspan = column.colspan || 24/columns.length;
                return <el-col span={colspan}>
                    <el-form-item label={column.label}>
                        {this.renderItem(column)}
                    </el-form-item>
                </el-col>
            }));
        },
        // 渲染行
        renderRow(rowDatas){
            return rowDatas.map((row)=>{
                return (
                    <el-row>{this.renderColumn(row)}</el-row>
                );
            });
        },
        // 通知外部方法
        submit3(){
            this.$emit('submit', JSON.parse(JSON.stringify(this.formData)));
        },
        // 提交给外部调用
        getFormData(){
          return JSON.parse(JSON.stringify(this.formData));
        }
    },
    render() {
        const {title, items} = this.config;
        console.log(this.$slots);
        return (
            <div>
                <h1>{title}</h1>
                <hr/>
                <el-form ref="form"  label-width="80px">
                    {this.renderRow(items)}
                </el-form>
                {
                    this.$scopedSlots.default ?
                    this.$scopedSlots.default(this.formData):
                        <el-button type="primary" onClick={() => this.submit3()}>默认提交</el-button>
                }
            </div>
        )
    }
}
